<template>
	<view class="viewport">
		<!-- 推荐封面图 -->
		<view class="cover">
			<image :src="bannerPicture">
			</image>
		</view>
		<!-- 推荐选项 -->
		<view class="tabs">
			<text class="text" :class="{active: currIndex == index}" v-for="(item, index) in subTypes" :key="item.id"
				@tap="currIndex = index">
				{{item.title}}
			</text>
		</view>
		<!-- 推荐列表 -->
		<scroll-view scroll-y @scrolltolower="onScrolltolower" class="scroll-view" v-for="(item,index) in subTypes"
			:key="item.id" v-show="currIndex === index">
			<view class="goods">
				<navigator hover-class="none" class="navigator" v-for="goods in item.goodsItems.items" :key="goods.id"
					:url="`/pages/goods/goods?id=${goods.id}`">
					<image class="thumb" :src="goods.picture">
					</image>
					<view class="name ellipsis">{{goods.name}}</view>
					<view class="price">
						<text class="symbol">¥</text>
						<text class="number">{{goods.price}}</text>
					</view>
				</navigator>
			</view>
			<view class="loading-text" v-if="item.finish">没有更多数据~</view>
			<view class="loading-text" v-else>正在加载...</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getHotRecommend
	} from '@/services/hot.js'
	export default {
		data() {
			return {
				hotMap: [{
						type: '1',
						title: '特惠推荐',
						url: '/hot/preference'
					},
					{
						type: '2',
						title: '爆款推荐',
						url: '/hot/inVogue'
					},
					{
						type: '3',
						title: '一站买全',
						url: '/hot/oneStop'
					},
					{
						type: '4',
						title: '新鲜好物',
						url: '/hot/new'
					},
				],
				currHotMap: '',
				bannerPicture: '',
				subTypes: [],
				currIndex: 0,
				page: 1 ,
				pageSize: 10,
			}
		},
		onLoad(options) {
			this.currHotMap = this.hotMap.find((item) => item.type == options.type)
			uni.setNavigationBarTitle({
				title: this.currHotMap?.title
			})
			this.getHotRecommendData()
		},
		methods: {
			// 获取数据
			async getHotRecommendData() {
				let query = {
					page: this.page,
					pageSize: this.pageSize
				}
				const res = await getHotRecommend(this.currHotMap.url, query)
				this.bannerPicture = res.result.bannerPicture
				this.subTypes = res.result.subTypes
			},
			// 滚动到底部触发
			async onScrolltolower() {
				let currSubType = this.subTypes[this.currIndex]
				if (currSubType.goodsItems.page < currSubType.goodsItems.pages) {
					currSubType.goodsItems.pages - currSubType.goodsItems.page == 1 ? currSubType.finish = true : '';
					currSubType.goodsItems.page++
				} else {
					// 标记结束，并返回提示
					currSubType.finish = true;
					console.log(this.subTypes[this.currIndex].finish);
					return uni.showToast({
						icon: "none",
						title: "没有更多数据~"
					})
				}
				let query = {
					subType: currSubType.id,
					page: currSubType.goodsItems.page,
					pageSize: currSubType.goodsItems.pageSize
				}
				const res = await getHotRecommend(this.currHotMap.url, query)
				this.subTypes[this.currIndex].goodsItems.items.push(...res.result.subTypes[this.currIndex]
					.goodsItems.items)
			}

		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #f4f4f4;
	}

	.viewport {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: 180rpx 0 0;
		position: relative;
	}

	.cover {
		width: 100%;
		height: 225rpx;
		border-radius: 0 0 40rpx 40rpx;
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.scroll-view {
		// flex: 1;
		height: calc(100vh - 128px);
	}

	.tabs {
		display: flex;
		justify-content: space-evenly;
		height: 100rpx;
		line-height: 90rpx;
		margin: 0 20rpx;
		font-size: 28rpx;
		border-radius: 10rpx;
		box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
		color: #333;
		background-color: #fff;
		position: relative;
		z-index: 9;

		.text {
			margin: 0 20rpx;
			position: relative;
		}

		.active {

			&::after {
				content: '';
				width: 80rpx;
				height: 6rpx;
				transform: translate(-50%);
				background-color: #27ba9b;
				position: absolute;
				left: 50%;
				bottom: 12rpx;
			}
		}
	}

	.goods {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 20rpx 20rpx;

		.navigator {
			width: 300rpx;
			padding: 20rpx;
			margin-top: 20rpx;
			border-radius: 10rpx;
			background-color: #fff;
		}

		.thumb {
			width: 305rpx;
			height: 305rpx;
		}

		.name {
			height: 88rpx;
			font-size: 26rpx;
		}

		.price {
			line-height: 1;
			color: #cf4444;
			font-size: 30rpx;
		}

		.symbol {
			font-size: 70%;
		}

		.decimal {
			font-size: 70%;
		}
	}

	.loading-text {
		text-align: center;
		font-size: 28rpx;
		color: #666;
		padding: 20rpx 0 50rpx;
	}
</style>